<template>
	<view class="page">
		<view class="notice">
			<u-icon name="info-circle-fill" color="#AC9146" size="30" top="3" />
			<text>准确填写个人信息，可享受每份代驾订单人身意外险</text>
		</view>
		<view class="credentials-container">
			<view class="credentials">
				<image :src="cardBackground[0]" class="bg"></image>
				<view class="cover">
					<image src="../static/filling/card.png" mode="widthFix" class="card"></image>
					<text class="desc">身份证正面</text>
					<ocr-navigator @onSuccess="scanIdcardFront" certificateType="idCard" :opposite="false">
						<button class="camera"></button>
					</ocr-navigator>
				</view>
			</view>
			<view class="credentials">
				<image :src="cardBackground[1]" class="bg"></image>
				<view class="cover">
					<image src="../static/filling/card.png" mode="widthFix" class="card"></image>
					<text class="desc">身份证背面</text>
					<ocr-navigator @onSuccess="scanIdcardBack" certificateType="idCard" :opposite="true">
						<button class="camera"></button>
					</ocr-navigator>
				</view>
			</view>
			<view class="credentials">
				<image :src="cardBackground[2]" class="bg"></image>
				<view class="cover">
					<image src="../static/filling/card.png" mode="widthFix" class="card"></image>
					<text class="desc">手持身份证</text>
					<button class="camera" @tap="takePhoto('idcardHolding')"></button>
				</view>
			</view>
			<view class="credentials">
				<image :src="cardBackground[3]" class="bg"></image>
				<view class="cover">
					<image src="../static/filling/card.png" mode="widthFix" class="card"></image>
					<text class="desc">驾驶证正面</text>
					<ocr-navigator @onSuccess="scanDrcardFront" certificateType="driverslicense">
						<button class="camera"></button>
					</ocr-navigator>
				</view>
			</view>
			<view class="credentials">
				<image :src="cardBackground[4]" class="bg"></image>
				<view class="cover">
					<image src="../static/filling/card.png" mode="widthFix" class="card"></image>
					<text class="desc">驾驶证背面</text>
					<button class="camera" @tap="takePhoto('drcardBack')"></button>
				</view>
			</view>
			<view class="credentials">
				<image :src="cardBackground[5]" class="bg"></image>
				<view class="cover">
					<image src="../static/filling/card.png" mode="widthFix" class="card"></image>
					<text class="desc">手持驾驶证</text>
					<button class="camera" @tap="takePhoto('drcardHolding')"></button>
				</view>
			</view>
		</view>

		<view class="title">个人信息</view>
		<view class="list">
			<u-cell-group border="false">
				<u-cell-item title="真实姓名" :value="idcard.name" :value-style="style" :arrow="false" />
				<u-cell-item title="性别" :value="idcard.sex" :value-style="style" :arrow="false" />
				<u-cell-item title="生日" :value="idcard.birthday" :value-style="style" :arrow="false" />
				<u-cell-item title="身份证号" :value="idcard.pid" :value-style="style" :arrow="false" />
				<u-cell-item title="身份证地址" :value="idcard.shortAddress" :value-style="style" @click="showAddressContent" />
				<u-cell-item title="身份证有效期" :value="idcard.expiration" :value-style="style" :arrow="false" />
			</u-cell-group>
		</view>
		<view class="title">联系方式</view>
		<view class="list">
			<u-cell-group border="false">
				<u-cell-item title="手机号码" :value="contact.tel" :value-style="style" @click="enterContent('手机号码', 'tel')" />
				<u-cell-item title="电子信箱" :value="contact.shortEmail" :value-style="style" @click="enterContent('电子信箱', 'email')" />
				<u-cell-item
					title="收信地址"
					:value="contact.shortMailAddress"
					:value-style="style"
					@click="enterContent('收信地址', 'mailAddress')"
				/>
				<u-cell-item
					title="紧急联系人"
					:value="contact.contactName"
					:value-style="style"
					@click="enterContent('紧急联系人', 'contactName')"
				/>
				<u-cell-item
					title="紧急联系人电话"
					:value="contact.contactTel"
					:value-style="style"
					@click="enterContent('紧急联系人电话', 'contactTel')"
				/>
			</u-cell-group>
		</view>
		<view class="title">驾驶证</view>
		<view class="list">
			<u-cell-group border="false">
				<u-cell-item title="驾驶证类型" :value="drcard.carClass" :value-style="style" :arrow="false" />
				<u-cell-item title="驾驶证有效期" :value="drcard.validTo" :value-style="style" :arrow="false" />
				<u-cell-item title="初次领证日期" :value="drcard.issueDate" :value-style="style" :arrow="false" />
			</u-cell-group>
		</view>

		<button class="btn" @tap="save" :disabled="realAuth == 3">保存信息</button>
		<view class="remark">您每次提交实名信息之后，都需要工作人员严格审查，请等候1~3天，这期间您将无法接单，特此声明！</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
let dayjs = require('dayjs');
export default {
	data() {
		return {
			mode: 'fill',
			style: {
				color: '#FF9900'
			},
			//前端预览用的
			cardBackground: [
				'../static/filling/credentials-bg.jpg',
				'../static/filling/credentials-bg.jpg',
				'../static/filling/credentials-bg.jpg',
				'../static/filling/credentials-bg.jpg',
				'../static/filling/credentials-bg.jpg',
				'../static/filling/credentials-bg.jpg'
			],
			//存储身份证信息的对象
			idcard: {
				pid: '',
				name: '',
				sex: '',
				//完整身份证地址
				address: '',
				//如果地址过长，以...省略
				shortAddress: '',
				birthday: '',
				expiration: '',
				idcardFront: '',
				idcardBack: '',
				idcardHolding: ''
			},
			contact: {
				tel: '',
				email: '',
				shortEmail: '',
				mailAddress: '',
				shortMailAddress: '',
				contactName: '',
				contactTel: ''
			},
			drcard: {
				issueDate: '',
				carClass: '',
				validFrom: '',
				validTo: '',
				drcardFront: '',
				drcardBack: '',
				drcardHolding: '',
				//司机身份证号
				drNo: ''
			},
			//存储已经上传过多少次腾讯云图片的路径
			cosImg: [],
			//存储本次腾讯云上传的图片
			currentImg: {},
			realAuth: uni.getStorageSync('realAuth')
		};
	},
	methods: {
		// ocr身份证正面回调
		scanIdcardFront: function(resp) {
			console.log(resp)
		    let that = this;
			//{"type":0,"name":{"text":"张三","pos":{"left_top":{"x":98.7780914307,"y":40.9823074341},"right_top":{"x":172.311325073,"y":41.2864379883},"right_bottom":{"x":172.190856934,"y":64.9047088623},"left_bottom":{"x":98.6072158813,"y":64.5630187988}},"label":[]},"gender":{"text":"男","pos":{"left_top":{"x":101.035919189,"y":80.7537384033},"right_top":{"x":121.421043396,"y":80.7818603516},"right_bottom":{"x":121.264938354,"y":101.272567749},"left_bottom":{"x":100.882026672,"y":101.244766235}},"label":[]},"nationality":{"text":"汉","pos":{"left_top":{"x":201.881393433,"y":81.7225189209},"right_top":{"x":222.004470825,"y":81.6959762573},"right_bottom":{"x":221.899169922,"y":101.255821228},"left_bottom":{"x":201.765304565,"y":101.291915894}},"label":[]},"address":{"text":"广州市天河区五山路483号xxxxxxxxx","pos":{"left_top":{"x":95.5787811279,"y":150.794250488},"right_top":{"x":310.358947754,"y":151.617507935},"right_bottom":{"x":310.004699707,"y":220.222885132},"left_bottom":{"x":95.1295013428,"y":219.552230835}},"label":[]},"id":{"text":"4452xxxxxxxxxxxx","pos":{"left_top":{"x":176.158676147,"y":244.072860718},"right_top":{"x":453.888336182,"y":244.978515625},"right_bottom":{"x":453.874603271,"y":266.313659668},"left_bottom":{"x":176.066543579,"y":265.342407227}},"label":[]},"card_position":{"pos":{"left_top":{"x":1085.625,"y":621.75},"right_top":{"x":338.125,"y":594.75},"right_bottom":{"x":303.625,"y":99.75},"left_bottom":{"x":1189.125,"y":126.75}},"label":[]},"image_width":1280,"image_height":960,"image_path":"http://tmp/wx4418e3e031e551be.o6zAJs-yC5ByIjnyyy09jKDZquXk.dlrc7P7WlhnGb4aca86b078fc2acb5b08e7a0f438943.jpg"}
		    let detail = resp.detail;
		    that.idcard.pid = detail.id.text;
		    that.idcard.name = detail.name.text;
		    that.idcard.sex = detail.gender.text;
		    that.idcard.address = detail.address.text;
		    //需要缩略身份证地址，文字太长页面显示不了
		    that.idcard.shortAddress = detail.address.text.substr(0, 15) + '...';
		    that.idcard.birthday = detail.birth.text;
		    //OCR插件拍摄到的身份证正面照片存储地址
		    that.idcard.idcardFront = detail.image_path;
		    //让身份证View标签加载身份证正面照片
		    that.cardBackground[0] = detail.image_path;
		    //发送Ajax请求，上传身份证正面照片
		    that.uploadCos(that.url.uploadCosPrivateFile, detail.image_path, 'driverAuth', function(resp) {
				//腾讯云存储图片   {path:'/driver/auth/images/xxxxx-xxx.jpg'}
		        console.log(resp)
				console.log(typeof resp)
				let data =  resp.data ;
		        let path = data.path;  //身份证照片的云端URL地址 
		        that.currentImg['idcardFront'] = path; //页面持久层保存身份证云端URL地址
		        /*
		         * 本页面所有上传到云端的照片云端URL地址都保存到数组中，因为用户可以反复拍摄身份证
		         * 照片，那么之前上传的照片到最后应该从云端删除掉。页面提交完整实名认证信息的时候，
		         * 需要比对cosImg数组中哪些照片不需要了，让云端删除不需要的证件照片
		         */
		        that.cosImg.push(path); 
		    });
		},
		//显示地址详情
		showAddressContent: function() {
			if (this.idcard.address.length > 0) {
				uni.showModal({
					title: '身份证地址',
					content: this.idcard.address,
					showCancel: false
				});
			}
		},
		//身份证背面操作
		scanIdcardBack: function(resp) {
		    let that = this;
		    let detail = resp.detail;
		    //OCR插件拍摄到的身份证背面照片存储地址
		    that.idcard.idcardBack = detail.image_path;
		    //View标签加载身份证背面照片
		    that.cardBackground[1] = detail.image_path;
		    //获取身份证过期日期 {"valid_date": {"text": "20171025-20271025"}}
		    let validDate = detail.valid_date.text.split('-')[1];
		    //日期格式化成yyyy-MM-dd形式  
		    that.idcard.expiration = dayjs(validDate, 'YYYYMMDD').format('YYYY-MM-DD');
		    //提交Ajax请求给后端
		    that.uploadCos(that.url.uploadCosPrivateFile, detail.image_path, 'driverAuth', function(resp) {
		        let data =resp.data;
		        let path = data.path;
		        that.currentImg['idcardBack'] = path;
		        that.cosImg.push(path);
		    });
		},
		//自定义相机，拍完照片以后回函方法(拍照类型，图片位置)
		updatePhoto: function(type, path) {
		    let that = this;
		    that.uploadCos(that.url.uploadCosPrivateFile, path, 'driverAuth', function(resp) {
				console.log(data)
		        let data = resp.data;
				//上传腾讯云的图片
		        that.cosImg.push(data.path);
				//手持身份证照片
		        if (type == 'idcardHolding') {
					//预览照片
		            that.cardBackground[2] = path;					
		            that.currentImg['idcardHolding'] = data.path;
		            that.idcard.idcardHolding = data.path;
		        }else if (type == 'drcardBack') {
					//驾驶证背面
					that.cardBackground[4] = path;
					that.currentImg['drcardBack'] = data.path;
					that.drcard.drcardBack = data.path;
				} else if (type == 'drcardHolding') {
					//手持驾驶证
					that.cardBackground[5] = path;
					that.currentImg['drcardHolding'] = data.path;
					that.drcard.drcardHolding = data.path;
				} 
		    });
			//迫使 Vue 实例重新渲染
		    this.$forceUpdate();
		},
		//点击打开自定义摄像头方法
		takePhoto(type){
			uni.navigateTo({
			     url: '../identity_camera/identity_camera?type=' + type
			});
		},
		//ocr驾照识别回调
		scanDrcardFront: function(resp) {
		    let that = this;
		    let detail = resp.detail;
			
			//司机身份证号
			that.drcard.drNo=detail.id_num.text;  
		    that.drcard.issueDate = detail.issue_date.text; //初次领证日期
		    that.drcard.carClass = detail.car_class.text; //准驾车型
		    that.drcard.validFrom = detail.valid_from.text; //驾驶证起始有效期
			
			//这个要进行计算  第1次6年 ，第2次是10年，第3次是长期
			let startYear=parseInt( detail.issue_date.text.split('-')[0])
			let nowYear= parseInt(detail.valid_from.text.split('-')[0])
			//驾驶证截止有效期
			if(nowYear-startYear<6){
			   that.drcard.validTo = '6年';  
			}else if(nowYear-startYear<16){
				that.drcard.validTo ='10年';
			}else{
				that.drcard.validTo='长期'
			} 
		    
		    that.drcard.drcardFront = detail.image_path;
		    that.cardBackground[3] = detail.image_path;
		    //把驾驶证正面照片上传到云端
		    that.uploadCos(that.url.uploadCosPrivateFile, detail.image_path, 'driverAuth', function(resp) {
		        let data = resp.data ;
		        let path = data.path;
		        that.currentImg['drcardFront'] = path;
		        that.cosImg.push(path);
		    });
		},
		//输入其它文字信息
		enterContent: function(title, key) {
			let that = this;
			uni.showModal({
				title: title,
				editable: true,
				content: that.contact[key],
				success: function(resp) {
					if (resp.confirm) {
						if (key == 'mailAddress') {
							that.contact['shortMailAddress'] = resp.content.substr(0, 15) + (resp
								.content.length > 15 ? '...' : '');
						} else if (key == 'email') {
							that.contact['shortEmail'] = resp.content.substr(0, 25) + (resp.content
								.length > 25 ? '...' : '');
						}
						that.contact[key] = resp.content;
					}
				}
			});
		},
		//保存数据
		save(){
			let that = this;
			//判断是否设置了6张照片
			if (Object.keys(that.currentImg).length != 6) {
				that.$refs.uToast.show({
					title: '证件上传不完整',
					type: 'error'
				});
				return
			}
			
			
			
			//执行前端验证
			 if ( that.checkValidTel(that.contact.tel, '手机号码') &&
				that.checkValidEmail(that.contact.email, '电子信箱') &&
				that.checkValidAddress(that.contact.mailAddress, '收信地址') &&
				that.checkValidName(that.contact.contactName, '联系人') &&
				that.checkValidTel(that.contact.contactTel, '联系人电话') &&
				that.checkSameValue(that.idcard.pid,that.drcard.drNo, '身份证号和驾照号不一致') ) {
			  
				
			}
		}
	},
	onLoad: function(options) {
		let that = this;
        that.mode = options.mode;
	}
};
</script>

<style lang="less">
@import url('filling.less');
</style>
